<template>
  <header class="sticky top-0 z-50 w-full border-b border-gray-200 dark:border-gray-800 glass">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex items-center justify-between h-16">
        <!-- Logo -->
        <NuxtLink to="/" class="flex items-center space-x-2 hover:opacity-90 transition-opacity">
          <SiteLogo :size="32" class="flex-shrink-0" />
          <span class="text-xl font-bold gradient-text">DevToolsNav</span>
        </NuxtLink>

        <!-- 导航菜单 -->
        <nav class="hidden md:flex items-center space-x-6">
          <NuxtLink to="/" class="nav-link">首页</NuxtLink>
          <NuxtLink to="/tools" class="nav-link">工具库</NuxtLink>
          <NuxtLink to="/articles" class="nav-link">博客</NuxtLink>
          <NuxtLink to="/pricing" class="nav-link">会员</NuxtLink>
        </nav>

        <!-- 右侧操作 -->
        <div class="flex items-center space-x-4">
          <!-- 搜索按钮 -->
          <button
            @click="openSearch"
            class="btn-ghost p-2 rounded-lg"
            aria-label="搜索"
          >
            <Icon name="heroicons:magnifying-glass" class="w-5 h-5" />
          </button>

          <!-- 主题切换 -->
          <button
            @click="toggleTheme"
            class="btn-ghost p-2 rounded-lg"
            aria-label="切换主题"
          >
            <Icon
              :name="isDark ? 'heroicons:sun' : 'heroicons:moon'"
              class="w-5 h-5"
            />
          </button>

          <!-- 用户菜单 -->
          <div v-if="isLoggedIn" class="relative">
            <button @click="showUserMenu = !showUserMenu" class="btn-ghost p-1 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">
              <UserAvatar 
                :avatar="authStore.user?.avatar" 
                :nickname="authStore.user?.nickname"
                size="md"
                class="ring-1 ring-gray-300 dark:ring-gray-600"
              />
            </button>
            
            <!-- 下拉菜单 -->
            <div
              v-if="showUserMenu"
              class="absolute right-0 mt-2 w-64 card py-2 shadow-lg"
              @click="showUserMenu = false"
            >
              <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
                <div class="flex items-center justify-between mb-1">
                  <p class="text-sm font-medium text-gray-900 dark:text-white">
                    {{ authStore.user?.nickname || '用户' }}
                  </p>
                  <!-- 会员徽章 -->
                  <span 
                    v-if="authStore.isPremium"
                    class="inline-flex items-center gap-1 text-xs bg-gradient-to-r from-yellow-400 to-orange-500 text-white px-2 py-0.5 rounded-full font-medium shadow-sm"
                  >
                    <Icon name="heroicons:star-solid" class="w-3 h-3" />
                    {{ authStore.user?.subscriptionType === 'premium' ? '高级' : '基础' }}
                  </span>
                </div>
                <p class="text-xs text-gray-500 dark:text-gray-400 truncate">
                  {{ authStore.user?.email }}
                </p>
                <!-- 会员到期时间 -->
                <p 
                  v-if="authStore.isPremium && authStore.user?.subscriptionEndDate"
                  class="text-xs text-yellow-600 dark:text-yellow-400 mt-1"
                >
                  到期：{{ formatDate(authStore.user.subscriptionEndDate) }}
                </p>
              </div>
              <NuxtLink to="/profile" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700">
                <Icon name="heroicons:user-circle" class="w-4 h-4 inline mr-2" />
                个人中心
              </NuxtLink>
              <!-- <NuxtLink to="/favorites" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700">
                <Icon name="heroicons:heart" class="w-4 h-4 inline mr-2" />
                我的收藏
              </NuxtLink> -->
              <NuxtLink 
                v-if="showAdminMenu"
                to="/admin" 
                class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700"
              >
                <Icon name="heroicons:cog-6-tooth" class="w-4 h-4 inline mr-2" />
                后台管理
              </NuxtLink>
              <hr class="my-2 border-gray-200 dark:border-gray-700" />
              <button @click="logout" class="w-full text-left px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 text-red-600">
                <Icon name="heroicons:arrow-right-on-rectangle" class="w-4 h-4 inline mr-2" />
                退出登录
              </button>
            </div>
          </div>

          <!-- 登录按钮 -->
          <NuxtLink v-else to="/login" class="btn btn-primary btn-sm">
            登录
          </NuxtLink>

          <!-- 移动端菜单按钮 -->
          <button
            @click="showMobileMenu = !showMobileMenu"
            class="md:hidden btn-ghost p-2 rounded-lg"
          >
            <Icon name="heroicons:bars-3" class="w-6 h-6" />
          </button>
        </div>
      </div>

      <!-- 移动端菜单 -->
      <div v-if="showMobileMenu" class="md:hidden py-4 border-t border-gray-200 dark:border-gray-700">
        <nav class="flex flex-col space-y-2">
          <NuxtLink to="/" class="nav-link-mobile">首页</NuxtLink>
          <NuxtLink to="/tools" class="nav-link-mobile">工具库</NuxtLink>
          <NuxtLink to="/articles" class="nav-link-mobile">博客</NuxtLink>
          <NuxtLink to="/pricing" class="nav-link-mobile">会员</NuxtLink>
        </nav>
      </div>
    </div>
  </header>
</template>

<script setup lang="ts">
const colorMode = useColorMode()
const isDark = computed(() => colorMode.preference === 'dark')
const toast = useToast()

const showUserMenu = ref(false)
const showMobileMenu = ref(false)

// 从 Pinia store 获取登录状态
const authStore = useAuthStore()
const isLoggedIn = computed(() => authStore.isLoggedIn)

// 计算是否显示管理入口
const showAdminMenu = computed(() => {
  return authStore.user?.role && ['super_admin', 'admin', 'editor'].includes(authStore.user.role)
})

/**
 * 切换主题
 */
const toggleTheme = () => {
  colorMode.preference = isDark.value ? 'light' : 'dark'
}

/**
 * 打开搜索
 */
const openSearch = () => {
  // TODO: 实现搜索功能
  console.log('打开搜索')
}

/**
 * 退出登录
 */
const logout = () => {
  authStore.logout()
  toast.success('已退出登录')
  setTimeout(() => navigateTo('/login'), 500)
}

/**
 * 格式化日期
 */
const formatDate = (date: string | Date | undefined) => {
  if (!date) return ''
  const d = new Date(date)
  return d.toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' })
}

// 点击外部关闭菜单
onClickOutside(ref(null), () => {
  showUserMenu.value = false
  showMobileMenu.value = false
})
</script>

<style scoped>
.nav-link {
  @apply text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 font-medium transition-colors;
}

.nav-link-mobile {
  @apply block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg;
}
</style>


